/**************** 首页 ****************/
@import './module-styles/define-styles.scss';

/******** 主元素 ********/
.index {
  /******** 首页导航封面 ********/
  .site-navigation {
    @include content-panel(0, 0);

    ul {
      @include center-block(18px);
      width: 800px;
      list-style: none;
      margin: 24px auto;
      padding: 0;
      display: flex;
      justify-content: space-between;
      align-items: stretch;
    }

    ul li {
      flex: 0 0 auto;
    }

    .nav-cover {
      width: 240px;
      height: 240px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      border-radius: $base-radius;
      box-shadow: $base-shadow;
      color: #ffffff;
      font: bolder 1.4rem/1.4rem 'Microsoft YaHei', sans-serif;
      text-shadow: 0 1px 1px #0003;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .nav-cover:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 16px rgba(59, 60, 63, 0.3);
    }

    /* 行业内公认的品牌色渐变 */
    .nav-cover.html {
      background-image: linear-gradient(135deg, #ff7e5f, #feb47b);
    }

    .nav-cover.css {
      background-image: linear-gradient(135deg, #00c6ff, #0072ff);
    }

    .nav-cover.javascript {
      background-image: linear-gradient(135deg, #f7df1e, #fdbb2d);
      color: #3d3d3d;
      text-shadow: none;
    }
  }
}
